<template>
    <div class="login-wrap" ref="loginWrap">
        <div class="top-container">
            <div class="top">
                <p class="pt-title">善达信息语音识别软件V1.0</p>
            </div>
            <!--form-->
            <div class="login-form-box">
                <el-form ref="loginForm" :model="userInfo">
                    <el-form-item prop="name">
                        <el-input v-model.trim="userInfo.username" placeholder="请输入用户名" autocomplete="off"
                                  @keyup.enter.native="onSubmit"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model.trim="userInfo.password" placeholder="请输入密码"
                                  @keyup.enter.native="onSubmit"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="login-btn" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

</template>

<script>

    export default {
        name: "Login",
        data() {
            return {
                userInfo: {
                    username: "",
                    password: ""
                }
            }
        },
        methods: {
            onSubmit() {
                if (this.userInfo.username == 'admin' && this.userInfo.password == '123456') {
                    this.$router.replace("/env/list")
                } else {
                    this.$message.error("输入的用户名或密码错误")
                }

            }
        }
    }
</script>
<style scoped>
    .login-wrap {
        width: 100%;
        min-width: 1200px;
        height: 100%;
        margin: 0 auto;
        background-image: linear-gradient(to bottom, #2C3E50, #000);
    }

    .top-container {
        width: 400px;
        margin: 0 auto;
        padding-top: 120px;
    }

    .top {
        text-align: center;
        color: #fff;
        padding: 0 0 30px;
    }

    .pt-title {
        font-size: 24px;
        font-weight: bold;
        line-height: 2;
        letter-spacing: 2px;
    }

    .login-form-box {
        width: 430px;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.1);
        padding: 50px 30px 30px;
        border-radius: 6px;
        box-shadow: 0 0 3px #aaa;
    }

    .login-btn {
        width: 100%;
    }
</style>